<template>
  <div id="houseSave">
    <div ref="dataReportTitle"><span style="padding: 0 20px;line-height: 60px;font-size: 20px">出入库报表</span></div>
    <div ref="dataInput">
      <el-form :inline="true" :model="search" class="demo-form-inline" style="padding: 0 20px;">
        <el-form-item label="出入库类型">
          <el-select v-model="search.labelsArry" multiple placeholder="请选择">
            <el-option
              v-for="item in elsTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="search.productName" placeholder="请输入产品名称" @keypress.native.enter="searchList"/>
        </el-form-item>
        <el-form-item label="产品英文名称">
          <el-input v-model="search.productNameEn" placeholder="请输入产品英文名称" @keypress.native.enter="searchList"/>
        </el-form-item>
        <el-form-item label="产品规格">
          <el-input v-model="search.productSpecName" placeholder="请输入产品规格" @keypress.native.enter="searchList"/>
        </el-form-item>
        <el-form-item label="仓库名称">
          <el-select v-model="search.storehouseId" clearable placeholder="请选择">
            <el-option
              v-for="item in storehouseOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用人(客户名称)">
          <el-input v-model="search.customerName" placeholder="请输入产品编号" @keypress.native.enter="searchList"/>
        </el-form-item>
        <el-form-item label="产品序列号">
          <el-input v-model="search.productUpcCode" placeholder="请输入产品编号" @keypress.native.enter="searchList"/>
        </el-form-item>
        <el-form-item label="出入库单号">
          <el-input v-model="search.elsNum" placeholder="请输入产品编号" @keypress.native.enter="searchList"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchList">查询</el-button>
          <el-dropdown
            v-if="moreTypes.length > 0"
            trigger="click"
            @command="handleTypeDrop">
            <flexbox class="right-more-item">
              <div>更多</div>
              <i
                class="el-icon-arrow-down el-icon--right"
                style="color:#777;"/>
            </flexbox>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, index) in moreTypes"
                :key="index"
                :command="item.type">{{ item.name }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
      </el-form>
      <!--时间选择-->
      <div class="block" style="text-align: center;margin-bottom: 10px">
        <el-date-picker
          v-model="search.dateValue"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="center">
        </el-date-picker>
      </div>
    </div>
    <div
      xs-empty-icon="nopermission"
      xs-empty-text="暂无权限"
      class="psi-container">
      <el-table
        v-loading="loading"
        id="psi-table"
        :data="list"
        :height="tableHeight"
        :cell-style="cellStyle"
        class="n-table--border"
        stripe
        border
        highlight-current-row
        @sort-change="sortChange"
        style="width: 100%;">
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :fixed="index==0"
          :prop="item.fieldName"
          :label="item.name"
          :index="index"
          :show-overflow-tooltip="true"
          sortable="custom"
          width="150">
          <template
            slot="header"
            slot-scope="scope">
            <div class="table-head-name" :title="scope.column.label">{{ scope.column.label }}</div>
          </template>
        </el-table-column>
        <el-table-column/>
      </el-table>
      <div ref="pagination" class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          class="p-bar"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>
    <p-s-i-export
      :show="showPSIExport"
      :psi-type="psiType"
      :els-search="elsSearch"
      :export-params="exportParams"
      @close="showPSIExport=false"/>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  psiElsReportHead,
  psiElsReportList
} from '@/api/psimanagement/els-report'
import {
  psiStorehouseIndex
} from '@/api/psimanagement/storehouse'
import PSIExport from '../components/PSIExport'
export default {
  /** 客户管理 的 产品列表 */
  name: 'MaterialIndex',
  components: {
    PSIExport
  },
  data() {
    return {
      loading: false, // 加载动画
      fieldList: [],
      list: [],
      currentPage: 1,
      pageSize: 15,
      pageSizes: [15, 30, 60, 100],
      total: 0,
      search: {
        productName: '',
        productNameEn: '',
        productSpecName: '',
        storehouseId: '',
        customerName: '',
        productUpcCode: '',
        elsNum: '',
        labelsArry: '',
        dateValue: ''
      },
      tableHeight: document.documentElement.clientHeight - 178,
      // 仓库的选择数据
      storehouseOptions: [],
      // 仓库的选择数据
      elsTypeOptions: [
        {
          value: 20,
          label: '销售退货'
        }, {
          value: 21,
          label: '归还入库'
        }, {
          value: 22,
          label: '维修入库'
        }, {
          value: 23,
          label: '内部测试入库'
        }, {
          value: 24,
          label: '盘盈'
        }, {
          value: 25,
          label: '其它入库'
        }, {
          value: 30,
          label: '采购入库'
        }, {
          value: 40,
          label: '销售出库'
        }, {
          value: 41,
          label: '借用出库'
        }, {
          value: 42,
          label: '维修出库'
        }, {
          value: 43,
          label: '内部测试出库'
        }, {
          value: 44,
          label: '盘亏出库'
        }, {
          value: 45,
          label: '其它出库'
        }],
      labelNew: '',
      /** 更多操作 */
      moreTypes: [],
      // 导入
      showPSIImport: false,
      // 导出
      showPSIExport: false,
      // 导出选中参数
      exportParams: {},
      elsSearch: {},
      // 排序的总次数
      firstSort: 0,
      sortNum: [],
      sortColumns: ''
    }
  },
  computed: {
    ...mapGetters(['psi']),
    psiType() {
      return this.getEnterType(this.$route.path)
    }
  },
  watch: {},
  mounted() {
    if (this.psi[this.psiType].import) {
      this.moreTypes.push({ type: 'enter', name: '导入' })
    }
    if (this.psi[this.psiType].export) {
      this.moreTypes.push({ type: 'out', name: '导出' })
    }
    this.getstorehouseList()
    this.getHeaderList()
    this.getPageList(false)
    this.$nextTick(() => { // 页面渲染完成后的回调
      this.tableHeight = document.documentElement.clientHeight - 178 - this.$refs.dataInput.offsetHeight
    })
  },
  methods: {
    searchList() {
      this.sortColumns = ''
      this.getPageList(false)
    },
    sortChange(column, prop, order) {
      let sortType = ''
      if (column.order === 'ascending') {
        sortType = 'asc'
      } else {
        sortType = 'desc'
      }
      if (this.sortNum.indexOf(column.column.index) != -1) {
        var strs = [] // 定义一数组
        strs = this.sortColumns.split(',') // 字符分割
        strs.splice(this.sortNum.indexOf(column.column.index), 1)
        strs.splice(this.sortNum.indexOf(column.column.index), 0, this.fieldList[column.column.index].columnName + ' ' + sortType)
        this.sortColumns = strs.join(',')
      } else {
        this.sortNum.push(column.column.index)
        if (this.sortNum.length === 1) {
          this.sortColumns += this.fieldList[column.column.index].columnName + ' ' + sortType
        } else {
          this.sortColumns += ',' + this.fieldList[column.column.index].columnName + ' ' + sortType
        }
      }
      this.getPageList(true)
    },
    getEnterType(val) {
      const str = val
      var two = ''
      const first = str.indexOf('/') + 1 // 从第一个横杠算起（+1表示不包括该横杠）
      const kong = str.indexOf(' ', first) // 第一个横杠后的第一个空格
      const heng = str.indexOf('/', first) // 第一个横杠后的第一个横杠（即第二个横杠）
      if (heng == -1) {
        two = str.substring(kong).substring(1, str.length)
      } else {
        two = str.substring(heng).substring(1, str.length)
      }
      return two
    },
    handleTypeDrop(command, params = {}) {
      if (command == 'out') {
        let paramsData = {}
        if (params.__export) {
          paramsData = params
          delete paramsData.__export
        } else {
          paramsData = {}
        }
        this.exportParams = paramsData
        var elsSearch = this.search
        elsSearch['startDate'] = this.search.dateValue[0]
        elsSearch['endDate'] = this.search.dateValue[1]
        elsSearch['sortColumns'] = this.sortColumns
        this.labelNew = ''
        if (this.search.labelsArry.length > 0) {
          for (var i = 0; i < this.search.labelsArry.length; i++) {
            this.labelNew += this.search.labelsArry[i] + ','
          }
        }
        elsSearch['labels'] = this.labelNew
        this.elsSearch = elsSearch
        this.showPSIExport = true
      } else if (command == 'enter') {
        this.showPSIImport = true
      }
    },
    /** 通过回调控制style */
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'name') {
        return { color: '#3E84E9', cursor: 'pointer' }
      } else {
        return ''
      }
    },
    // 获取表头
    getHeaderList() {
      psiElsReportHead()
        .then(res => {
          this.fieldList = res.data
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    getstorehouseList() {
      var praprm = {
        limit: 100,
        page: 1,
        search: '',
        type: 61
      }
      psiStorehouseIndex(praprm)
        .then(res => {
          res.data.list.forEach((item) => {
            this.storehouseOptions.push({ value: item.storehouseId, label: item.name })
          })
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 获取数据
    getPageList(data) {
      this.loading = true
      var praprm = this.search
      praprm['page'] = data ? this.currentPage : 1
      praprm['limit'] = this.pageSize
      praprm['startDate'] = this.search.dateValue[0]
      praprm['endDate'] = this.search.dateValue[1]
      praprm['sortColumns'] = this.sortColumns
      this.labelNew = ''
      if (this.search.labelsArry.length > 0) {
        for (var i = 0; i < this.search.labelsArry.length; i++) {
          this.labelNew += this.search.labelsArry[i] + ','
        }
      }
      praprm['labels'] = this.labelNew
      psiElsReportList(praprm)
        .then(res => {
          this.list = res.data.list
          this.total = res.data.totalRow
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 更改每页展示数量
    handleSizeChange(val) {
      this.pageSize = val
      this.getPageList(true)
    },
    // 更改当前页数
    handleCurrentChange(val) {
      this.currentPage = val
      this.getPageList(true)
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../psimanagement/styles/table.scss';
  .right-more-item {
    cursor: pointer;
    border: 1px solid #dcdfe6;
    background-color: white;
    font-size: 13px;
    color: #777;
    padding: 0 12px;
    border-radius: 2px;
    height: 34px;
  }
</style>

